// src/views/QuestionBank.vue
<template>
  <div class="question-bank">
    <h2>MBTI题库管理</h2>
    <el-button type="primary" @click="addDialog = true">新增题目</el-button>
    <el-table :data="questions" style="width: 100%; margin-top: 20px">
      <el-table-column prop="text" label="问题内容" />
      <el-table-column prop="A" label="选项A" />
      <el-table-column prop="B" label="选项B" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="edit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="remove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="addDialog" title="添加题目">
      <el-form :model="form">
        <el-form-item label="问题内容"><el-input v-model="form.text" /></el-form-item>
        <el-form-item label="选项A"><el-input v-model="form.A" /></el-form-item>
        <el-form-item label="选项B"><el-input v-model="form.B" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'QuestionBank',
  data() {
    return {
      questions: [],
      addDialog: false,
      form: { text: '', A: '', B: '', id: null }
    };
  },
  methods: {
    async fetchQuestions() {
      // TODO: 替换为后端接口
      this.questions = [
        { id: 1, text: '你喜欢计划还是随性？', A: '计划', B: '随性' }
      ];
    },
    save() {
      if (this.form.id) {
        const idx = this.questions.findIndex(q => q.id === this.form.id);
        if (idx !== -1) this.questions[idx] = { ...this.form };
      } else {
        this.questions.push({ ...this.form, id: Date.now() });
      }
      this.addDialog = false;
      this.form = { text: '', A: '', B: '', id: null };
    },
    edit(row) {
      this.form = { ...row };
      this.addDialog = true;
    },
    remove(id) {
      this.questions = this.questions.filter(q => q.id !== id);
    }
  },
  mounted() {
    this.fetchQuestions();
  }
};
</script>

<style>
.question-bank { padding: 20px; }
</style>


// src/views/ResultAnalytics.vue
<template>
  <div class="result-analytics">
    <h2>测试结果可视化</h2>
    <el-select v-model="selectedClass" placeholder="选择班级" style="width: 200px">
      <el-option v-for="cls in classes" :key="cls" :label="cls" :value="cls" />
    </el-select>
    <div style="margin-top: 30px">
      <v-chart :option="chartOption" autoresize />
    </div>
  </div>
</template>

<script>
import { use } from 'echarts/core';
import VChart from 'vue-echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);

export default {
  name: 'ResultAnalytics',
  components: { VChart },
  data() {
    return {
      selectedClass: '',
      classes: ['软件工程2022-1班', '计算机2022-2班'],
      chartOption: {}
    };
  },
  watch: {
    selectedClass(val) {
      this.loadChart(val);
    }
  },
  methods: {
    loadChart(className) {
      // 模拟数据
      this.chartOption = {
        title: { text: `${className} MBTI 类型分布`, left: 'center' },
        tooltip: { trigger: 'item' },
        legend: { bottom: 10, left: 'center' },
        series: [
          {
            name: 'MBTI类型',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 5, name: 'INTJ' },
              { value: 3, name: 'ENTP' },
              { value: 4, name: 'ISFJ' },
              { value: 2, name: 'ESFP' }
            ]
          }
        ]
      };
    }
  }
};
</script>

<style>
.result-analytics { padding: 30px; }
</style>
